<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #massage-one {
            width: 350px;
            height: 210px;
            background-color: white;
            border-top: 2px solid yellow;
            border-bottom: 2px solid yellow;
            overflow: hidden;
            position: relative;
        }

        #massage-two {
            width: 350px;
            height: 210px;
            background-color: white;
            border-top: 2px solid yellow;
            border-bottom: 2px solid yellow;
            position: relative;
        }

        #massage-three {
            width: 350px;
            height: 210px;
            background-color: white;
            border-top: 2px solid yellow;
            border-bottom: 2px solid yellow;
            position: relative;
        }

        span {
            font-size: 10px;
        }

        button {
            position: absolute;
            top: 8px;
            right: 10px;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <div id="massage-one">
        <p>W</p><button data-id="massage-one">X</button><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore
            obcaecati dolorem explicabo qui ad libero officia illum, cumque, nemo delectus maiores, blanditiis possimus
            consequatur doloribus ea? Voluptate aliquam inventore excepturi maxime id consequatur repellat obcaecati ea
            ipsam labore. Reprehenderit quia, impedit dicta molestiae.</span>
    </div>
    <div id="massage-two">
        <p>Y</p><button data-id="massage-two">X</button><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore
            obcaecati dolorem explicabo qui ad libero officia illum, cumque, nemo delectus maiores, blanditiis possimus
            consequatur doloribus ea? Voluptate aliquam inventore excepturi maxime id consequatur repellat obcaecati ea
            ipsam labore. Reprehenderit quia, impedit dicta molestiae.</span>
    </div>
    <div id="massage-three" >
        <p>L</p><button data-id="massage-three">X</button><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore
            obcaecati dolorem explicabo qui ad libero officia illum, cumque, nemo delectus maiores, blanditiis possimus
            consequatur doloribus ea? Voluptate aliquam inventore excepturi maxime id consequatur repellat obcaecati ea
            ipsam labore. Reprehenderit quia, impedit dicta molestiae.</span>
    </div>

    <script>
        document.body.onclick = function (e) {
            let target = e.target;
            if (target.dataset.id !== '') {
                let item = document.getElementById(target.dataset.id);
                if (item) {
                    item.hidden = !item.hidden;
                }

            }
        }

    </script>
</body>

</html>